<template>
  <div id="applyVSReport">
    <div class="bodyContent">
      <el-tabs type='border-card'>
        <el-tab-pane label="申请项目对照">
          <Splitpanes class="area">
            <!-- 左侧报告单元列表 -->
            <Pane :size="30">
              <vxe-toolbar perfect>
                <template #buttons>
                  <vxe-input v-model="searchForm.groupSearchValue" type="search" clearable class="vxeInputSearch" placeholder="关键字查询" @clear="getFeeItemList" @keyup="keyupFeeItemEnter" @search-click="getFeeItemList()"></vxe-input>
                  <vxe-select ref="refType" v-model="hrForm.interfaceId" placeholder="请选择接口" style="width:45%;">
                    <vxe-option v-for="intf in interfaceTypeList" :key="intf.id" :label="intf.interfaceName" :value="intf.id"></vxe-option>
                  </vxe-select>
                  <vxe-button type="text" class="button-blue" icon="vxe-icon-refresh" content="刷新" :loading="feeItemShowLoading" @click="getFeeItemList"></vxe-button>
                </template>
              </vxe-toolbar>
              <div class="leftTable">
                <vxe-table ref="labFeeItemTable" border class="mytable-scrollbar" height="750" show-header-overflow show-overflow align="left" :row-config="{ isCurrent: true, isHover: true }" @current-change="grouprowClick" :data="feeItemList" :loading="feeItemShowLoading">
                  <vxe-column type="seq" title="#" width="30"></vxe-column>
                  <vxe-column field="feeCode" title="项目编号" width="150"></vxe-column>
                  <vxe-column field="feeName" title="项目名称"></vxe-column>
                </vxe-table>
              </div>
            </Pane>
            <!-- 中间对照信息 -->
            <Pane :size="36">
              <vxe-toolbar perfect>
                <template #buttons>
                  <vxe-button type="text" class="button-blue" icon="vxe-icon-refresh" content="刷新" :loading="showLoading" @click="findItemDictList"></vxe-button>
                </template>
              </vxe-toolbar>

              <div class="leftTable">
                <vxe-table ref="feeitemVsItemdictTable" border class="mytable-scrollbar" height="750" show-header-overflow show-overflow align="left" :row-config="{ isCurrent: true, isHover: true }" :data="feeitemVsItemdictList" :loading="showLoading" @cell-dblclick="deleteFeeitemVsItemdictList" :edit-config="{ trigger: 'click', mode: 'cell' }" :column-config="{ resizable: true }">
                  <!-- <vxe-column type="checkbox" width="30px" align="center"></vxe-column> -->
                  <vxe-column type="seq" title="序号" width="50"></vxe-column>
                  <vxe-column field="uploadItemNo" title="互认项目编码"></vxe-column>
                  <vxe-column field="uploadItemNa" title="互认项目名称"></vxe-column>
                  <vxe-column field="itemNo" title="申请项目编码"></vxe-column>
                  <vxe-column field="itemNa" title="申请项目名称"></vxe-column>
                </vxe-table>
              </div>
            </Pane>
            <!-- 右侧信息 -->
            <Pane :size="34">
              <vxe-toolbar perfect>
                <template #buttons>
                  <vxe-input v-model="searchValue" type="search" clearable class="vxeInputSearch" placeholder="关键字查询" @clear="getItemDictList" @keyup="keyupItemDictEnter" @search-click="getItemDictList()"></vxe-input>
                  <vxe-button type="text" class="button-blue" icon="vxe-icon-refresh" content="刷新" :loading="showLoading" @click="getItemDictList"></vxe-button>
                  <vxe-button type="text" class="button-blue" icon="vxe-icon-square-plus" content="新建" @click="addHrItem"></vxe-button>
                </template>
              </vxe-toolbar>
              <div class="rightTable">
                <vxe-table ref="itemDictTable" border show-header-overflow height="750" show-overflow align="left" :row-config="{ isCurrent: true, isHover: true }" @cell-dblclick="itemDictRowClick" :data="itemDictList" :loading="showLoading" class="mytable-scrollbar">
                  <vxe-column type="seq" title="#" width="30"></vxe-column>
                  <vxe-column field="itemNo" title="互认项目代码" :edit-render="{ autofocus: '.vxe-input--inner' }">
                  </vxe-column>
                  <vxe-column field="itemNa" title="互认项目名称" :edit-render="{ autofocus: '.vxe-input--inner' }">
                  </vxe-column>
                  <vxe-column field="right" label="操作" width="80" align="center">
                    <template #default="{ row, rowIndex }">
                      <vxe-button type="text" status="primary" icon="vxe-icon-edit" circle @click="itemEdit(row)"> </vxe-button>
                      <vxe-button type="text" status="danger" icon="vxe-icon-delete" circle @click="itemDelete(row)"> </vxe-button>
                    </template>
                  </vxe-column>
                </vxe-table>
              </div>
            </Pane>
          </Splitpanes>
        </el-tab-pane>
        <el-tab-pane label="报告项目对照">
          <LabUploadItemVsReportItem :systemId=props.systemId :moduleId=props.moduleId></LabUploadItemVsReportItem>
        </el-tab-pane>
      </el-tabs>

      <!-- 添加或修改定时任务对话框 -->
      <vxe-modal class-name="addEditHrItemDialog" v-model="openHrItem" title="互认项目" width="40vw" height="30vh" show-zoom resize>
        <el-form ref="formRef" :model="hrForm" label-width="100px">
          <el-row>
            <el-col :span="24">
              <el-form-item label="申请项目编码" prop="itemNo">
                <el-input v-model="hrForm.itemNo" placeholder="请输入申请项目编码"> </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="申请项目名称" prop="itemNa">
                <el-input v-model="hrForm.itemNa" placeholder="请输入申请项目名称"> </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="dialogFooter">
          <el-button type="primary" @click="submitHrForm">确 定</el-button>
          <el-button @click="cancelHrForm">取 消</el-button>
        </div>
      </vxe-modal>

    </div>
  </div>
</template>

<script lang="ts" setup>
// 引入组件区 ==========
import Breadcrumb from '@/components/Breadcrumb.vue';
import { Splitpanes, Pane } from 'splitpanes';
import { ref, reactive, getCurrentInstance, onMounted, watch } from 'vue';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage'; //提示信息
import { AppStore } from '@/stores/store';
import { isEmpty } from 'lodash';
import SelectWorkGroup from '@/views/lab_sys/lab_bus/components/SelectWorkGroup.vue'; //报告单元引入下拉组件
import { GetRptGroupOptions } from '@/utils/SysOptionsHelper';
import { IsEmpty } from '@/utils/common';
import LabUploadItemVsReportItem from './LabUploadItemVsReportItem.vue';
import VXETable from 'vxe-table';

let store = AppStore();
// 全局变量定义区 ==========
// 变量定义区
let { proxy }: any = getCurrentInstance();
let conWidth = ref(document.documentElement.clientWidth);
const itemDictList = reactive([]);
let selevctFeeItemRow: any = reactive({
  id: ''
});

let searchGroupForm = reactive({
  rptGroup: ''
});

let feeItemList = reactive([]);
let showLoading = ref(false); //刷新+表格加载
let feeItemShowLoading = ref(false);
let searchValue = ref('');
let searchValueVS = ref('');
const searchForm = reactive({
  orgId: store.userInfo.orgId,
  groupSearchValue: '',
  name: store.userInfo.orgName
});
let instrSetupList = reactive([]); //仪器列表
let channelList = reactive([]); //通道号列表
let dataIndex = ref(null); //数据索引
let addDialog = ref(false); //添加弹框展示状态
let loading = ref(false); //添加弹框展示状态
let rowData = ref({}); //当前行数据
let hrForm = reactive({});
let openHrItem = ref(false);
let interfaceTypeList = reactive([]);
let props = defineProps({
  systemId: String,
  moduleId: String,
  moduleSystemName: String
}) as any;

watch(
  () => props.systemId,
  (n, o) => {
    getFeeItemList();
    findInterfaceList();
  },
  {
    deep: true,
    immediate: true
  }
);
watch(
  () => props.moduleId,
  (newval, oldvbal) => {
    getFeeItemList();
  },
  {
    deep: true
  }
);

const feeitemVsItemdictList = reactive([]);
// 方法定义区 =============

function findInterfaceList() {
  interfaceTypeList.length = 0;
  const url = '/api/sys/SysInterfaceCaUser/findInterfaceList';
  proxy.$http
    .get(url, { params: { systemId: props.systemId, moduleId: props.moduleId } })
    .then((res: any) => {
      if (res.data && res.data.length > 0) {
        interfaceTypeList.push(...res.data);
        hrForm.interfaceId = res.data[0].id;
      }
    })
    .catch((err: any) => {
      proxy.$alert(err, '提示');
    });
}

function cancelHrForm() {
  openHrItem.value = false;
}

function addHrItem() {
  hrForm.id = '';
  hrForm.itemNo = '';
  hrForm.itemNa = '';
  openHrItem.value = true;
}

function itemEdit(row) {
  Object.assign(hrForm, row);
  openHrItem.value = true;
}

function submitHrForm() {
  hrForm.type = 1;
  if (hrForm.id) {
    proxy.$http
      .post('/lab/uploadItem/editUploadItem', hrForm)
      .then((res: any) => {
        if (res.status.code === 1) {
          openHrItem.value = false;
          VxeMessage('修改成功', VxeNotifyType.success);
          getItemDictList();
        } else {
          return;
        }
      })
      .catch((err: any) => {
        VxeMessage('修改失败', VxeNotifyType.error);
      });
  } else {
    proxy.$http
      .post('/lab/uploadItem/addUploadItem', hrForm)
      .then((res: any) => {
        if (res.status.code === 1) {
          openHrItem.value = false;
          VxeMessage('添加成功', VxeNotifyType.success);
          getItemDictList();
        } else {
          return;
        }
      })
      .catch((err: any) => {
        VxeMessage('添加失败', VxeNotifyType.error);
      });
  }
}

async function itemDelete(row) {
  const type = await VXETable.modal.confirm('确定要删除当前数据？');
  if (type === 'confirm') {
    const data = {
      id: row.id
    };
    const url = '/lab/uploadItem/deleteUploadItem';
    proxy.$http
      .post(url, data)
      .then((res: any) => {
        if (res.status.code === 1) {
          findDictItemByFeeItemId(null);
          VxeMessage('删除成功', VxeNotifyType.success);
        } else {
          VxeMessage(res.status.msg, VxeNotifyType.error);
        }
      })
      .catch((err: any) => {
        VxeMessage(err, VxeNotifyType.error);
      });
  }
}
// 点击当前行// 行点击事件
function rptRowClick({ row }: any) {
  const $reportTable = proxy.$refs.labchannelTableRef;
  if ($reportTable) {
    $reportTable.setCurrentRow(row);
  }

  addDialog.value = false;
  findItemDictList();
}

function formatCommon(arr, value) {
  for (const item of arr) {
    if (item.code == value) {
      return item.name;
    }
  }
}

function getItemDictList() {
  findDictItemByFeeItemId(selevctFeeItemRow);
}

// 回车查询
function keyupFeeItemEnter(e: any) {
  if (e.$event.code == 'Enter') {
    getFeeItemList();
  }
}

function keyupItemDictEnter(e: any) {
  if (e.$event.code == 'Enter') {
    getItemDictList();
  }
}

// 获取申请项目
function getFeeItemList() {
  feeItemList.length = 0;
  feeItemShowLoading.value = true;
  const url = '/lis/fee/item/findFeeItemList';
  let obj = {
    params: {
      keyWords: searchForm.groupSearchValue,
      orgId: searchForm.orgId,
      rptGroup: searchGroupForm.rptGroup
    }
  };
  proxy.$http
    .get(url, obj)
    .then((res: any) => {
      if (res && res.data && res.data.length > 0) {
        feeItemList.push(...res.data);
        if (feeItemList.length > 0) {
          const kn = feeItemList.find((k) => k.id == selevctFeeItemRow.id);
          if (isEmpty(kn)) {
            grouprowClick({ row: feeItemList[0] });
          } else {
            grouprowClick({ row: kn });
          }
        } else {
          selevctFeeItemRow.id = '';
          feeitemVsItemdictList.length = 0;
        }
      } else {
        selevctFeeItemRow.id = '';
        feeitemVsItemdictList.length = 0;
      }
      feeItemShowLoading.value = false;
    })
    .catch((err: any) => {
      proxy.$alert(err, '提示');
      feeItemShowLoading.value = false;
    });
}

// 获取报告项目列表
function findDictItemByFeeItemId(row: any) {
  itemDictList.length = 0;
  showLoading.value = true;
  const url = '/lab/uploadItem/findUploadItem';
  let obj = {
    params: {
      searchValue: searchValue.value,
      type: 1,
      code: selevctFeeItemRow.feeCode,
      interfaceId: hrForm.interfaceId
    }
  };
  proxy.$http
    .get(url, obj)
    .then((res: any) => {
      if (res.data && res.data.length > 0) {
        itemDictList.push(...res.data);
      }
      showLoading.value = false;
    })
    .catch((err: any) => {
      proxy.$alert(err, '提示');
      showLoading.value = false;
    });
}

// 点击当前行// 行点击事件
function grouprowClick({ row }: any) {
  (proxy.$refs.labFeeItemTable as any).setCurrentRow(row);
  selevctFeeItemRow = row;
  proxy.$nextTick(() => {
    setTimeout(() => {
      (proxy.$refs.labFeeItemTable as any).scrollToRow(row);
    }, 150);
  });
  findItemDictList();
  findDictItemByFeeItemId(row);
}

// 获取中间的报告单元信息
function findItemDictList() {
  feeitemVsItemdictList.length = 0;
  const url = '/lab/uploadItem/findUploadItemVsItemByCode';
  const data = {
    params: {
      code: selevctFeeItemRow.feeCode,
      type: 1,
      interfaceId: hrForm.interfaceId
    }
  };
  proxy.$http
    .get(url, data)
    .then((res: any) => {
      feeitemVsItemdictList.push(...res.data);
    })
    .catch((err: any) => {
      proxy.$alert(err, '提示');
    });
}
//双击右侧列表
function itemDictRowClick({ row }: any) {
  if (isEmpty(selevctFeeItemRow.id)) {
    VxeMessage('请选择申请项目', VxeNotifyType.error);
    return;
  }
  const url = '/lab/uploadItem/addUploadItemVsItem';
  let labFeeitemVsItemDict = {
    itemNo: selevctFeeItemRow.feeCode,
    itemNa: selevctFeeItemRow.feeName,
    uploadItemNo: row.itemNo,
    uploadItemNa: row.itemNa,
    type: 1,
    seq: feeitemVsItemdictList.length + 1,
    interfaceId: hrForm.interfaceId
  };
  proxy.$http
    .post(url, labFeeitemVsItemDict)
    .then((res: any) => {
      findItemDictList();
      findDictItemByFeeItemId(row);
    })
    .catch((err: any) => {
      proxy.$alert(err, '提示');
    });
}

// 双击中间列表删除数据
function deleteFeeitemVsItemdictList({ row }: any) {
  const url = '/lab/uploadItem/deleteUploadItemVsItem';
  proxy.$http
    .post(url, {
      id: row.id
    })
    .then((res: any) => {
      findItemDictList();
      findDictItemByFeeItemId(row);
      VxeMessage(res.status.msg, VxeNotifyType.success);
    })
    .catch((err: any) => {
      VxeMessage(err, VxeNotifyType.error);
    });
}
</script>
<style lang="scss" scoped>
#applyVSReport {
  height: 100%;

  .bodyContent {
    height: calc(100% - 60px);

    .el-tabs {
      height: 100%;

      :deep(.el-tabs__content) {
        height: calc(100% - 39px);
        padding: 0px;

        .el-tab-pane {
          height: 100%;
        }
      }
    }

    .area {
      background-color: $base-white;
    }

    // 附加按钮间距
    .button-blue,
    .button-red {
      margin: 5px 0 5px 5px;
    }

    // 查询按钮
    .SearchBtn {
      margin-right: 5px;
    }

    .tableBox {
      height: calc(100% - 40px);

      .vxe-table {
        height: 100%;

        :deep(.vxe-table--render-wrapper) {
          height: 100%;

          .vxe-table--main-wrapper {
            height: 100%;

            .vxe-table--body-wrapper {
              height: calc(100% - 26px) !important;
            }
          }
        }
      }
    }
  }
  .dialogFooter {
    text-align: right;
  }
}
</style>
